<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .router-link-active{
            background-color: #f00;
        }

        /*首页自己的类名实现高亮*/
        .active{
            border: 1px solid gold;

        }
    </style>

</head>
<body>
<div id="hashapp">

    <!--我们可以router-link定义导航链接-->
    <router-link to="/home">首页</router-link>
    <router-link to="/news">新闻</router-link>
    <router-link to="/about">关于</router-link>

    <!--路由的出口，router-view 组件是 vue-router 提供。当hash变化后，内容在这里展示。-->
    <router-view></router-view>

</div>

</body>

<script src="lib/vue.js"></script>
<!--
vue-router v3.4.9
-->
<script src="lib/vue-router.js"></script>

<script type="text/javascript">
    /*
    * 使用 vue-router  spa 开发
    *
    * 1. 定义路由组件
    *   1.1 首页
    *   1.2 新闻
    *   1.3 关于
    * 2. 定义路由隐射表
    *   是一个数组，数组里面的每一个对象是一条路由规则
    *       path 属性是定义路由地址
    *       name 属性是定义路由规则的名称，非必须
    *       component 属性是定义路由地址对应组件，当用户访问该path的时候，就渲染该组件
    * 3. 在 vue实例对象里面注册 路由器
    * */
    const Home = {
        template: `
            <div>

            <h2>首页</h2>
            <p>首页的内容展示</p>
            <p>首页的内容展示</p>
            <p>首页的内容展示</p>
</div>
        `
    }

    const News = {
        template: `
            <div>
            <h2>News</h2>
            <p>News 的内容展示</p>
</div>
        `
    }

    const About = {
        template: `
            <div>
            <h2>About</h2>
            <p>About 的内容展示</p>

</div>
        `
    }

    const routes = [
        /*定义默认的路由规则 #/ */
        /*方式1：*/
        /*{
            path: '/',
            name: 'index',
            component: Home,
        },*/

        /*方式2：*/
        /*{
            /!*''代表 --> #/!*!/
            path: '',
            name: 'index',
            component: Home,
        },*/
        /*方式3*/
        {
            path: '/',
            name: 'index',
            /* redicret 单词翻译过来叫做重定向。代表访问 #/的时候，跳转到 /home*/
            /* redicret 路由规则里面的 path */
            redirect: '/home',
        },

        /*路由隐射表里面的每一个对象是一个路由关系*/
        {
            path: '/home', // 路由地址，锚点url地址
            name: 'home', // 给这个路由规则起的名字，非必须
            component: Home,
        },
        {
            path: '/news',
            name: 'news',
            component: News,
        },
        {
            path: '/about',
            name: 'about',
            component: About,
        },

    ];

    /*使用vue-router得到路由器，底层就会去做hash的监听，页面的切换*/

    const router = new VueRouter({
        routes: routes,
        linkActiveClass: 'active',
    })

    /*
    * 实例化vue
    * */
    new Vue({
        el: "#hashapp",
        data: {},
        //router该属性的值是： new VueRouter 这个的实例对象
        router: router
    });
</script>

</html>
